<template>
  <div class="datacontent" id="datacontent">
    <a-input-search placeholder enter-button @search="onSearch" class="a_input" v-model="searchData"/>

    <a-table
      class="a_table"
      :columns="columns"
      :data-source="data"
      :rowKey="data.key"
      :scroll="{ x: 1500 }"
      :pagination= "{ pageSize: 10,total:this.total }"
      @change="handleTableChange"
    >
<!--      <a slot="action1" href="javascript:;" @click="get12398">搜索</a>-->
      <a slot="action2" slot-scope="col" href="javascript:;" @click="details(col)">查看详情</a>
    </a-table>

    <a-modal
      v-model="visible"
      title="投诉/举报/咨询办理"
      @ok="handleOk"
      dialogClass="a_modal"
      width="1500px"
      top="10px"
    >
      <table border="1" class="table">
        <tr class="DataContent_tr">
          <td colspan="2" class="title">业务类型</td>
          <td class="colspan_tousu answer">{{ datalist.serviceType }}</td>
          <td class="colspan_qudao title">信息来源渠道</td>
          <td class="colspan_phono answer">{{ datalist.informationSources }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">接收投诉/投诉/咨询的时间</td>
          <td class="answer">{{ datalist.complaintTime }}</td>
          <td class="title">案号</td>
          <td class="answer">{{ datalist.caseNumber }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询大类</td>
          <td class="answer">{{ datalist.complaintSuperclass }}</td>
          <td class="title">投诉/举报/咨询小类</td>
          <td class="answer">{{ datalist.complaintSubclass }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td rowspan="4" class="rowspan_gaikuang title">投诉/举报/咨询人概况</td>
          <td class="rowspan_leixing title">投诉/举报/咨询人类型</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffType }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">姓名或名称</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffName }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">联系电话</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffTelephone }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">地址</td>
          <td colspan="3" class="answer">{{ datalist.plaintiffAddress }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td rowspan="4" class="title">被投诉（举报）人概况</td>
          <td class="title">被投诉（举报）人类型</td>
          <td colspan="3" class="answer">{{ datalist.defendantType }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">姓名或名称</td>
          <td colspan="3" class="answer">{{ datalist.defendantName }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">联系电话</td>
          <td colspan="3" class="answer">{{ datalist.defendantTelephone }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td class="title">地址</td>
          <td colspan="3" class="answer">{{ datalist.cdefendantAddress }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询事项</td>
          <td colspan="3" class="answer">{{ datalist.complaintContent }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询请求</td>
          <td colspan="3" class="answer">{{ datalist.complaintRequest }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">投诉/举报/咨询附件</td>
          <td colspan="3" class="answer">{{ datalist.complaintEnclosure }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">转企业办理时间</td>
          <td colspan="3" class="answer">{{ datalist.enterpriseHandleTime }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">转企业办理意见</td>
          <td colspan="3" class="answer">{{ datalist.enterpriseHandleIdea }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title"><i style="color:red">*</i> 办理结果</td>
          <td colspan="3" class="answer">{{ datalist.handlingResults }}</td>
        </tr>
        <tr class="DataContent_tr">
          <td colspan="2" class="title">附件</td>
          <td colspan="3" class="answer">{{ datalist.enclosure }}</td>
        </tr>
      </table>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

const columns = [
  { title: '业务类型', dataIndex: 'serviceType', key: 'serviceType', width:120 },
  { title: '姓名', dataIndex: 'plaintiffName', key: 'plaintiffName', width:120 },
  { title: '时间', dataIndex: 'createTime', key: 'createTime', width:160 },
  { title: '电话', dataIndex: 'plaintiffTelephone', key: 'plaintiffTelephone', width:120 },
  { title: '地址', dataIndex: 'plaintiffAddress', key: 'plaintiffAddress', ellipsis: true },
  { title: '事项', dataIndex: 'complaintContent', key: 'complaintContent', ellipsis: true },
  {
    // title: '操作',
    // key: '11',
    // fixed: 'right',
    // ellipsis: true,
    // scopedSlots: { customRender: 'action1' }

  },
  {
    title: '操作',
    key: '12',
    fixed: 'right',
    width: 100,
    scopedSlots: { customRender: 'action2' }
  }
]

export default {
  data() {
    return {
      data: [],
      columns,
      visible: false,
      searchData:'',
      datalist: {},
      total:0,
      current:1
    }
  },
  created() {
    this.getDataList()
  },
  methods: {

    //table分页
    handleTableChange(page) {
      var register = {
        pageNo:page.current
      }
      getAction('/nlpcs/nlpcs_12398/list', register)
        .then(res => {
          console.log(res)
          this.data = res.result.records
          this.data.forEach((item, index) => {
            item.key = index + 1
          })
        })
        .catch(err => {
          console.log(err)
        })
      },

    // 搜索事件
    get12398() {
      this.$message.info('搜索');
    },

    // 查看详情事件
    details(v) {
      console.log(v);

      this.visible = true
      this.datalist = v
    },

    // 确定按钮事件
    handleOk(e) {
      this.visible = false
    },

    // 搜索按钮事件
    onSearch() {
      var register = {
        plaintiffName:this.searchData,
      }
      getAction('/nlpcs/nlpcs_12398/list',register)
      .then(res=>{
        this.data = res.result.records
        this.total = res.result.total
        console.log(res)
        if(res.result.records.length == 0){
          var register = {
            serviceType:this.searchData,
          }
          getAction('/nlpcs/nlpcs_12398/list',register)
            .then(res=> {
              this.data = res.result.records
              this.total = res.result.total
              console.log(res)
            })
        }
      })
      .catch(err=>{
        console.log(err)
      })
    },
    // 请求数据列表
    getDataList() {
      var register = {}
      getAction('/nlpcs/nlpcs_12398/list', register)
        .then(res => {
          console.log(res)
          this.data = res.result.records
          this.total = res.result.total
          this.data.forEach((item, index) => {
            item.key = index + 1
          })
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
.datacontent{
  margin: 40px;
  min-height:  calc(100vh - 59px);
}
.table {
  width: 100%;
  height: 700px;
  margin-top: 30px;
}
.rowspan_gaikuang {
  width: 150px;
}
.rowspan_leixing {
  width: 150px;
}
.colspan_tousu {
  width: 400px;
}
.colspan_qudao {
  width: 350px;
}
.button2 {
  margin-left: 10px;
}
.button3 {
  margin-left: 10px;
}
.colspan_phono {
  width: 100px;
}
.a_modal {
  top: 20px;
}
.a_input {
  width: 1200px;
}
.a_table {
  margin-top: 30px;
}
.title{
  font-size: 15px;
  /* text-align: center; */
  font-weight: 600;
  padding-right: 10px;
  text-align: right;

}
.answer{
  color: grey;
  padding-left: 10px;
}
.DataContent_tr:hover{
  background-color: #B5B5B5;
}
</style>
